<template>
	<div class="manage_platform" v-loading="loadings">
		<header>
			<div class="left">
				<img src="../../assets/images/manage/abao.png" alt=""/>
				<p><span>宝店</span>&nbsp;·&nbsp;管理平台</p>
			</div>
			<div class="right">
				<p @click="goMine">返回列表页</p>
				<div class="head_img">
					<img :src="headImg" alt=""/>
					<p>{{ username }}</p>
				</div>
				<div class="setting">
					<img src="../../assets/images/manage/setting.png" alt=""/>
					<img @click="goHomepage" src="../../assets/images/manage/loginout.png" alt=""/>
				</div>
			</div>
		</header>
		<div class="content">
			<div class="border_content">
				<div class="func_lists">
					<div class="first_class" v-for="(items,index) in allData" :key="index">
						<div @click="selected(allData[index].childArr.length,index)"
						     :class="{selOne:allData[index].childArr.length===0&&index===firstIndex,preOne:allData[index].childArr.length===0}">
							<img :src="items.img" alt=""/>
							<h6 :class="{black:allData[index].childArr.length===0}">{{ items.name }}</h6>
							<p v-if="allData[index].childArr.length===0&&index===firstIndex"></p>
						</div>
						<ul>
							<li v-if="allData[index].childArr.length>0"
							    :class="{selected:index===firstIndex&&ind===secondIndex}"
							    v-for="(item,ind) in allData[index].childArr" :key="ind" @click="selFunction(index,ind)">{{
								item.name }}								
							</li>
							<p class="add_function" v-if="index===1" @click="handleAdd">+添加功能</p>
							<p class="service" v-if="index===4"><img src="../../assets/images/manage/qq.png" alt=""/>在线客服</p>
						</ul>
					</div>
				</div>
				<!-- 菜单栏对应的内容 -->
				<div class="content_detail">
					<!-- 首页 -->
					<div class="content0" v-if="firstIndex===0">
						<div class="today_subject">
							<img :src="appliInfo.face_path" alt=""/>
							<h3>{{ appliInfo.title }}</h3>
						</div>
						<div class="today_info">
							<div class="today_info_1 common">
								<p><img src="../../assets/images/manage/addup.png" alt=""/>累计访问量</p>
								<h1>{{ 92198878 | formatNum }}</h1>
							</div>
							<div class="today_info_2 common">
								<p><img src="../../assets/images/manage/newadd.png" alt=""/>新增人数</p>
								<h1>{{ 57 | formatNum }}</h1>
							</div>
							<div class="today_info_3 common">
								<p><img src="../../assets/images/manage/attention.png" alt=""/>累计关注人数</p>
								<h1>{{ 586254 | formatNum }}</h1>
							</div>
						</div>
					</div>
					<!-- 功能管理start -->
					<!-- 自定义菜单 -->
					<div class="content1_0" v-if="firstIndex===1&&secondIndex===0">
						<z-menu @adds="goAddF"></z-menu>
					</div>
					<!-- 定制页管理 -->
					<div class="content1_1" v-if="firstIndex===1&&secondIndex===1">
						<index-m></index-m>
					</div>
					<div class="content1_2" v-if="firstIndex===1&&secondIndex===2">
						<micro-shop :froms="froms" :data="this.appliInfo"></micro-shop>
					</div>
					<div class="content1_3" v-if="firstIndex===1&&secondIndex===3">
						<must-read :data="this.appliInfo"></must-read>
					</div>
					<!-- 专题 -->
					<div class="content1_4" v-if="firstIndex===1&&secondIndex===4">
						<special-topic :data="this.appliInfo"></special-topic>
					</div>
					<!-- 同城活动管理 -->
					<div class="content1_4" v-if="firstIndex===1&&secondIndex===5">
						<same-city-activity :data="this.appliInfo"></same-city-activity>
					</div>
					<div class="content1_5" v-if="firstIndex===1&&secondIndex===6">群聊管理</div>					
					<!-- 添加功能 -->
					<div v-if="firstIndex===1&&secondIndex===-1">
						<add-function></add-function>
					</div>
					<!-- 推广 -->
					<div class="content2_0" v-if="firstIndex===2">
						<!-- 秒杀活动 -->
						<div v-if="secondIndex===0">
							<seckill-activity @goAddGoods="goAddG" :data="this.appliInfo"></seckill-activity>
						</div>
						<!-- 市场活动 -->
						<div v-else-if="secondIndex===1">						
							<activity-list @goAddGoods="goAddG" :data="this.appliInfo"></activity-list>
						</div>
						<self-free-spread v-else :data="this.allData[firstIndex].childArr[secondIndex]"></self-free-spread>
					</div>
					<!-- 统计 -->
					<div class="content3_0" v-if="firstIndex===3&&secondIndex===0">
						<user-analysis></user-analysis>
					</div>
					<div class="content3_1" v-if="firstIndex===3&&secondIndex===1">
						<image-analysis></image-analysis>
					</div>
					<div class="content3_2" v-if="firstIndex===3&&secondIndex===2">
						<visit-analysis></visit-analysis>
					</div>
					<!-- 设置 -->
					<div class="content4_0" v-if="firstIndex===4&&secondIndex===0">应用号设置</div>
					<div class="content4_1" v-if="firstIndex===4&&secondIndex===1">安全中心</div>
					<div class="content4_2" v-if="firstIndex===4&&secondIndex===2">违规记录</div>
					<!-- 功能管理end -->
				</div>
			</div>
		</div>
		<!-- 返回顶部 -->
		<div id="goTop" @click="goTop">返回顶部</div>
	</div>
</template>

<script>
	import {setCookie, getCookie, removeCookie, clearCookie} from '@/assets/js/cookie.js'
	import zMenu from './diyMenu.vue'
	import indexM from './indexM.vue'
	import activityPromote from './activityPromote.vue'
	import activityList from './activityList.vue'
	import addFunction from './addFunction/addFunction'
	import mustRead from './mustRead/mustRead'
	import microShop from './microShop/microShop'
	import specialTopic from './special/specialTopic'
	import selfFreeSpread from './spreads/selfFreeSpread'
	import userAnalysis from './statistics/userAnalysis'
	import imageAnalysis from './statistics/imageAnalysis'
	import visitAnalysis from './statistics/visitAnalysis'
	import sameCityActivity from './sameCity/sameCityActivity'
	import seckillActivity from './seckill/seckillActivity'
	import axios from 'axios'
	import qs from 'qs'

	export default {
		name: 'manage_platform',
		data() {
			return {
				loadings: true,
				headImg: '',
				username: '',
				appliInfo: {}, //上个页面传过来的服务号信息
				allData: [{
					id: 1,
					name: '首页',
					img: require('../../assets/images/manage/homepage.png'),
					childArr: []
				}, {
					id: 2,
					name: '功能管理',
					img: require('../../assets/images/manage/function.png'),
					childArr: [{
						id: 1,
						name: '自定义菜单'
					}, {
						id: 2,
						name: '定制页管理'
					}, {
						id: 3,
						name: '微店管理'
					}, {
						id: 4,
						name: '必读管理'
					}, {
						id: 5,
						name: '专题'
					}, {
						id: 6,
						name: '同城活动管理'
					}, {
						id: 7,
						name: '群聊管理'
					}]
				}, {
					id: 3,
					name: '推广',
					img: require('../../assets/images/manage/spread.png'),
					childArr: []
				}, {
					id: 4,
					name: '统计',
					img: require('../../assets/images/manage/statistics.png'),
					childArr: [{
						id: 41,
						name: '用户分析'
					}, {
						id: 42,
						name: '图文分析'
					}, {
						id: 43,
						name: '访问分析'
					}]
				}, {
					id: 5,
					name: '设置',
					img: require('../../assets/images/manage/set.png'),
					childArr: [{
						id: 51,
						name: '应用号设置'
					}, {
						id: 52,
						name: '安全中心'
					}, {
						id: 53,
						name: '违规记录'
					}]
				}],
				firstIndex: 0, //选中的一级索引
				secondIndex: 0, //选中的二级索引
				addFunction : false,
				showGoTop: false,
				froms: ''
			}
		},
		components: {
			zMenu,
			indexM,
			microShop,
			addFunction,
			mustRead,
			specialTopic,
			activityPromote,
			activityList,
			selfFreeSpread,
			userAnalysis,
			imageAnalysis,
			visitAnalysis,
			sameCityActivity,
			seckillActivity
		},
		computed: {

		},
		watch: {

		},
		mounted(){
			this.spread();						
		},
		created() {			
			/* 防止页面后退 */
			history.pushState(null, null, document.URL);
			window.addEventListener('popstate', function () {
				history.pushState(null, null, document.URL);
			});			
			this.getHeadPic();
			if (!getCookie('UID') || !getCookie('TOKEN')) {
				this.$router.push('/homepage');
			}
			if (localStorage.getItem('abAppUserName')) {
				this.username = localStorage.getItem('abAppUserName');
			}
			if(localStorage.getItem('appli')){
				this.appliInfo = JSON.parse(localStorage.getItem('appli'));
			}
			window.addEventListener('scroll',function(e){
				let t =document.documentElement.scrollTop||document.body.scrollTop;
				if(t > 300){
					document.getElementById('goTop').style.display = 'block';
				}else{
					document.getElementById('goTop').style.display = 'none';
				}
			})
		},
		methods: {
			//获取头像
			getHeadPic(){
				let obj = {
					uid: getCookie('UID'),
					token: getCookie('TOKEN')
				};
				this.$axiosGet('/platform/service/headpic.json', obj, true).then(res => {
					if(res.data.code === 200){
						this.headImg = res.data.data;
					}
				})
			},
			//推广
			spread(){
				this.loadings = true;
				//最后四个是动态的，其它是写死的
				axios({
					url: '//www.mofing.com/utils/docs/storepromotion.json',
					method: 'get',
					headers: {
						'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8'
					},
				}).then(res=>{
					if(res.data.code === 200){
						this.goTop();
						let arr = res.data.data;
						arr.forEach((i,v)=>{
							i.name = i.title;
							delete(i.title);
						})
						this.allData[2].childArr = arr;
						let obj1 = {
							id:1,
							name:'秒杀活动推广'
						};
						let obj2 = {
							id:2,
							name:'市场活动推广'
						};
						this.allData[2].childArr.unshift(obj1,obj2);
						this.loadings = false;
					}					
				})
			},
			goMine() {
				this.$router.push('/mine');
			},
			//选中一级功能
			selected(len, id) {
				this.firstIndex = id;
			},
			//选中二级功能
			selFunction(id, iid) {
				this.firstIndex = id;
				this.secondIndex = iid;
				if(document.documentElement.scrollTop){
					document.documentElement.scrollTop = 0;
				}else{
					document.body.scrollTop = 0;
				}
			},
			//退出
			goHomepage() {
				let self = this;
				this.$confirm('是否确定退出？','提示',{
					type: 'warning'
				}).then(()=>{
					clearCookie();
					localStorage.clear();
					sessionStorage.clear();
					self.$router.push('/homepage');
				}).catch(()=>{

				})
			},
			handleAdd(){
				this.goTop();
				this.firstIndex = 1;
				this.secondIndex = -1;
			},			
			//自定义菜单更多跳转添加功能
			goAddF(){
				this.goTop();
				this.firstIndex = 1;
				this.secondIndex = -1;
			},
			goAddG(){
				this.firstIndex = 1;
				this.secondIndex = 2;
				this.froms = 'marketAct';
			}
		},
		filters: {
			//千位分隔符
			formatNum(n) {
				var b = parseInt(n).toString();
				var len = b.length;
				if (len <= 3) {
					return b;
				}
				var r = len % 3;
				return r > 0 ? b.slice(0, r) + "," + b.slice(r, len).match(/\d{3}/g).join(",") : b.slice(r, len).match(/\d{3}/g).join(",");
			},
		}
	}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
	.manage_platform {
		min-height: 100%;
		background: #e6edf5;
		padding-bottom: 20px;
		#goTop{
			position: fixed;
			right: 40px;
			bottom: 80px;
			border: 1px solid #dee3eb;
			width: 65px;
			height: 40px;
			font-size: 12px;
			line-height: 40px;
			color: #666;
			cursor: pointer;
			background: #fff;
			text-align: center;
			display: none;
			&:hover{
				color: #0aa770;
			}
		}
		header {
			width: 100%;
			height: 59px;
			background: #fff;
			display: flex;
			justify-content: space-between;
			padding: 5px 110px 5px 128px;
			border-bottom: 1px solid #ccc;
			.left {
				display: flex;
				align-items: center;
				img {
					width: 53px;
					height: 50px;
					margin-right: 31px;
				}
				p {
					font-size: 17px;
					color: #999;
					span {
						color: #ff6000;
					}
				}
			}
			.right {
				display: flex;
				align-items: center;
				> p {
					font-size: 15px;
					color: #3ca0ec;
					cursor: pointer;
					&:hover {
						text-decoration: underline;
					}
				}
				.head_img {
					display: flex;
					align-items: center;
					margin: 0 36px 0 50px;
					img {
						width: 46px;
						height: 46px;
						border-radius: 50%;
						margin-right: 8px;
					}
					p {
						font-size: 15px;
						color: #3ca0ec;
					}
				}
				.setting {
					display: flex;
					align-items: center;
					img {
						width: 23px;
						height: 24px;
						cursor: pointer;
					}
					img:nth-of-type(1) {
						margin-right: 18px;
					}
				}
			}
		}
		.content {
			height: 82%;
			.border_content {
				width: 83.19%;
				min-height: 100%;
				margin: 20px auto;
				background: #fff;
				border: 1px solid #cdcdcd;
				display: flex;
				.func_lists {
					width: 16.53%;
					height: 100%;
					border-right: 1px solid #e0e0e0;
					.first_class {
						border-bottom: 1px solid #e0e0e0;
						padding: 14px 0;
						> div {
							display: flex;
							padding: 11px 0 7px 16%;
							position: relative;
							img {
								width: 21px;
								height: 22px;
								margin-right: 15px;
							}
							h6 {
								font-size: 17px;
								color: #aaa;
								font-weight: 400;
							}
							.black {
								color: #000;
							}
							p {
								position: absolute;
								left: 0;
								top: 0;
								width: 5px;
								height: 100%;
								background: #3ca0ec;
							}
						}
						.selOne {
							cursor: pointer;
							background: #f3f4f9;
						}
						.preOne {
							cursor: pointer;
						}
						> ul {
							list-style: none;
							li {
								height: 46px;
								line-height: 46px;
								font-size: 13px;
								color: #000;
								cursor: pointer;
								text-align: left;
								padding-left: 33.33%;
								white-space: nowrap;
								&:hover {
									background: #f3f4f9;
								}
							}
							.selected {
								background: #f3f4f9;
								border-left: 5px solid #3ca0ec;
								text-indent: -5px;
							}
							.add_function {
								border: 1px dashed #e0e0e0;
								width: 79.8%;
								margin: 0 auto 15px auto;
								height: 32px;
								line-height: 32px;
								font-size: 13px;
								color: #000;
								cursor: pointer;
							}
							.service {
								display: flex;
								justify-content: center;
								align-items: center;
								border: 1px dashed #e0e0e0;
								width: 79.8%;
								margin: 28px auto 63px auto;
								height: 32px;
								line-height: 32px;
								font-size: 13px;
								color: #000;
								cursor: pointer;
								img {
									width: 18px;
									height: 18px;
									margin-right: 6px;
								}
							}
						}
					}
				}
				.content_detail {
					width: 83.47%;
					min-height: 100%;
					.content0 {
						.today_subject {
							padding: 50px 0 32px 0;
							border-bottom: 1px solid #e0e0e0;
							img {
								width: 89px;
								height: 90px;
								margin-bottom: 26px;
							}
							h3 {
								font-size: 24px;
								color: #000;
								font-weight: 500;
							}
						}
						.today_info {
							display: flex;
							justify-content: space-around;
							border-bottom: 1px solid #e0e0e0;
							padding: 90px 0 154px 0;
							.common {
								width: 33.33%;
								text-align: left;
								padding-left: 51px;
								p {
									display: flex;
									align-items: center;
									font-size: 14px;
									color: #000;
									img {
										width: 22px;
										height: 20px;
										margin-right: 4px;
									}
								}
								h1 {
									font-size: 28px;
									color: #000;
									margin-top: 10px;
								}
							}
						}
					}
					.content1_0 {
						h1 {
							text-align: left;
							font-size: 34px;
							color: #000;
							font-weight: 500;
							padding: 38px 0 28px 72px;
							border-top: 1px solid #cdcdcd;
							border-bottom: 1px solid #cdcdcd;
						}
						.option_status {
							height: 120px;
							background: #f4f5f9;
							display: flex;
							align-items: center;
							padding: 0 44px;
							text-align: left;
							> img {
								width: 50px;
								height: 50px;
								margin-right: 10px;
							}
							> div {
								h3 {
									font-size: 24px;
									color: #666;
									font-weight: 400;
									margin-bottom: 6px;
								}
								p {
									font-size: 18px;
									color: #999;
									span {
										color: #3ca0ec;
										cursor: pointer;
										&:hover {
											text-decoration: underline;
										}
									}
								}
							}
						}
						.phone_shows1 {
							display: flex;
							padding: 20px 10px 20px 46px;
							.phone_show1 {
								width: 346px;
								height: 703px;
								background: url('../../assets/images/manage/menu/phone1.png') no-repeat;
								background-size: 100% 100%;
								position: relative;
								h3 {
									position: absolute;
									top: 70px;
									left: 50px;
									font-size: 29px;
									color: #000;
								}
								.phone_show1_icons {
									position: absolute;
									bottom: 60px;
									left: 50%;
									transform: translateX(-50%);
									width: 90%;
									height: 58px;
									background: #f7f7f7;
									display: flex;
									justify-content: center;
									.phone_show1_icon1 {
										width: 18%;
										display: flex;
										flex-direction: column;
										align-items: center;
										justify-content: center;
										cursor: pointer;
										img {
											width: 25px;
											height: 25px;
											opacity: .2;
										}
										p {
											height: 22px;
											font-size: 14px;
											color: #7f7f7f;
											white-space: nowrap;
										}
									}
									.sel1 {
										img {
											opacity: 1;
										}
										p {
											color: #000;
										}
									}
									.sel1_1 {
										border: 1px solid #3ca0ec;
										img {
											opacity: 1;
										}
										p {
											color: #3ca0ec;
										}
									}
								}
							}
							.no_content_show {
								font-size: 24px;
								color: #666;
								margin-left: 16%;
								display: flex;
								align-items: center;
								justify-content: center;
							}
							.content_show1 {
								width: 554px;
								background: #f4f5f9;
								border: 1px solid #e7e7eb;
								margin-left: 18px;
								padding-bottom: 20px;
								.content_show1_title {
									display: flex;
									justify-content: space-between;
									padding: 24px 22px;
									border-bottom: 1px solid #e4e8eb;
									p:nth-of-type(1) {
										font-size: 26px;
										color: #000;
										font-weight: 500;
									}
									p:nth-of-type(2) {
										font-size: 26px;
										color: #3ca0ec;
										cursor: pointer;
										&:hover {
											text-decoration: underline;
										}
									}
								}
								.content_show1_text {
									display: flex;
									align-items: center;
									padding: 0 22px;
									margin: 36px 0 26px 0;
									p {
										font-size: 26px;
										color: #666;
										margin-right: 42px;
									}
									input {
										width: 356px;
										height: 80px;
										line-height: 80px;
										border: 1px solid #ddd;
										font-size: 35px;
										color: #999;
										padding: 0 24px;
									}
									h6 {
										font-size: 25px;
										color: #999;
										font-weight: 400;
									}
								}
								.content_show1_icons {
									display: flex;
									align-items: center;
									justify-content: space-around;
									margin-top: 50px;
									p {
										font-size: 26px;
										color: #666;
									}
									> div {
										width: 88px;
										height: 82px;
										background: #fff;
										display: flex;
										align-items: center;
										justify-content: center;
										border: 1px solid #ddd;
										img {
											width: 50px;
											height: 50px;
										}
									}
									button {
										width: 180px;
										height: 56px;
										line-height: 56px;
										background: #fff;
										font-size: 24px;
										color: #666;
										border: 1px solid #b1b1b1;
									}
									h3 {
										width: 180px;
										font-size: 24px;
										color: #3ca0ec;
										font-weight: 400;
									}
								}
								.all_icons {
									width: 94%;
									margin: 8px auto;
									background: #fff;
									border: 1px solid #b1b1b1;
									padding: 14px 0;
									.icons1 {
										display: flex;
										flex-flow: wrap;
										.icon1 {
											width: 10%;
											display: flex;
											flex-direction: column;
											align-items: center;
											justify-content: space-around;
											margin-bottom: 28px;
											cursor: pointer;
											&:hover {
												background: #ddd;
											}
											img {
												width: 18px;
												height: 18px;
												margin-bottom: 8px;
											}
											p {
												font-size: 8px;
												color: #999;
											}
										}
									}
									.icon1_cancel {
										display: flex;
										justify-content: flex-end;
										p {
											font-size: 18px;
											color: #666;
											margin-right: 36px;
											cursor: pointer;
										}
									}
								}
							}
						}
						.menu_sort {
							display: flex;
							padding: 0 106px;
							button:nth-of-type(1),
							button:nth-of-type(3) {
								width: 182px;
								height: 55px;
								line-height: 55px;
								background: #fff;
								font-size: 24px;
								color: #666;
								border: 1px solid #b1b1b1;
							}
							button:nth-of-type(2) {
								width: 200px;
								height: 55px;
								line-height: 55px;
								background: #3ca0ec;
								font-size: 24px;
								color: #fff;
								margin: 0 38px 0 149px;
							}
							button:nth-of-type(3) {
								width: 152px;
							}
						}
						.is_preview {
							position: fixed;
							top: 0;
							left: 0;
							bottom: 0;
							right: 0;
							margin: auto;
							background: rgba(0, 0, 0, .5);
							z-index: 99;
							display: flex;
							flex-direction: column;
							align-items: center;
							justify-content: center;
							.phone_shows1 {
								padding: 0;
								.phone_show1 {
									width: 300px;
									height: 600px;
									background: url('../../assets/images/manage/menu/YourScreenHere1.png') no-repeat;
									background-size: 100% 100%;
									position: relative;
									.phone_show1_icons {
										width: 86%;
										.phone_show1_icon1 {
											cursor: default;
										}
									}
								}
							}
							button {
								width: 190px;
								height: 58px;
								line-height: 58px;
								background: #fff;
								font-size: 19px;
								color: #3ca0ec;
								border-radius: 5px;
								margin-top: 36px;
							}
						}
						.is_menu_sort {
							text-align: left;
							.phone_shows1{
								display: flex;
								align-items: center;
								>h3{
									font-size: 24px;
									color: #666;
									font-weight: 400;
									margin-left: 16%;
								}
								.phone_show1{
									position: relative;
									h6{
										position: absolute;
										bottom: 240px;
										left: 50%;
										transform: translateX(-50%);
										font-size: 13px;
										color: #a0a0a0;
										font-weight: 400;
									}
									.all_functions{
										width: 90%;
										background: #f5f5f5;
										position: absolute;
										bottom: 58px;
										left: 50%;
										transform: translateX(-50%);
										display: flex;
										flex-wrap: wrap-reverse;
										.phone_show1_icon1{
											width: 20%;
											height: 64px;
											display: flex;
											flex-direction: column;
											align-items: center;
											justify-content: center;
											border: 1px solid #c3c3c3;
											img{
												width: 25px;
												height: 25px;
											}
											p{
												height: 22px;
												font-size: 14px;
												color: #7f7f7f;
												white-space: nowrap;
											}
										}
									}
								}
							}
							.sort_btns{
								display: flex;
								button{
									width: 180px;
									height: 55px;
									line-height: 55px;
									background: #fff;
									font-size: 24px;
									color: #666;
									border: 1px solid #b1b1b1;
									margin-left: 50px;
								}
							}
							.finish_mask{
								position: fixed;
								top: 0;
								left: 0;
								bottom: 0;
								right: 0;
								margin: auto;
								background: rgba(0,0,0,.5);
								z-index: 999;
								display: flex;
								align-items: center;
								justify-content: center;
								button{
									border: none;
									width: 39.3%;
									height: 52px;
									line-height: 52px;
									background: #3ca0ec;
									font-size: 24px;
									color: #fff;
								}
							}
						}
					}					
				}
			}
		}
	}
</style>